﻿<!DOCTYPE html>
<html>
<head>
<!--
  Copyright (c) 2019 Jean-Marc VIGLINO, 
  released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
-->
  <title>ol-ext: print control</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<meta name="description" content="Print control for Openlayers" />
	<meta name="keywords" content="openlayers, control, print, canvas" />

  <link rel="stylesheet" href="../style.css" />

  <!-- jQuery -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

  <!-- Openlayers -->
  <link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" />
  <script type="text/javascript" src="https://openlayers.org/en/latest/build/ol.js"></script>
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>

  <!-- ol-ext -->
  <link rel="stylesheet" href="../../dist/ol-ext.css" />
  <script type="text/javascript" src="../../dist/ol-ext.js"></script>

  <!-- https://github.com/MrRio/jsPDF -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
  <!-- filesaver-js -->
  <script type="text/javascript" src="https://cdn.rawgit.com/eligrey/FileSaver.js/aa9f4e0e/FileSaver.min.js"></script>

  <style>
    #image {
      background-color: #eee;
      padding: 1em;
      clear: both;
      display: inline-block;
      margin: 1em 0;
    }
  </style>
</head>
<body >
  <a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>

  <a href="../../index.html">
    <h1>ol-ext: print control</h1>
  </a>
  <div class="info">
    The <b>ol.control.Print</b> is a control to export a map as an image.
    <br/>
    Use <a href="https://github.com/eligrey/FileSaver.js/">eligrey/FileSaver</a> 
    or <a href="https://github.com/MrRio/jsPDF">MrRio/jsPDF</a>
    to save resulting image.
    <ul><li>
      The <i>print()</i> method can be used to get an image programmatically.
    </li><li>
      Use the <i>imageType</i> and <i>quality</i> options to adjust image properties.
    </li><li>
      Listen to the <i>print</i> event to do something when image is ready.
    </li><li>
      The <i>printing</i> event is send when loading.
    </li></ul>
  </div>

  <!-- Map div -->
  <div id="map" style="width:600px; height:400px;"></div>

  <div class="options">
    <h2>Options:</h2>
    <ul><li>
        <label><input id="file" type="checkbox" /> save as file</label>
    </li></ul>
    <a id="export-jpg" class="btn" download="map.jpg" target="_new" onclick="printControl.print({ imageType: 'image/jpeg'})">
      Export JPEG
    </a>
    <a id="export-png" class="btn" download="map.png" target="_new" onclick="printControl.print({ imageType: 'image/png'})">
      Export PNG
    </a>
    <a id="export-pdf" class="btn" download="map.pdf" data-margin="10" target="_new" onclick="printControl.print({ imageType: 'image/jpeg', pdf:true })">
      Export PDF
    </a>
  </div>
  <div id='image'>
    <h2>Resulting image</h2>
    <img/>
  </div>

  <script type="text/javascript">

    // The map
    var map = new ol.Map({
        target: 'map',
        view: new ol.View ({
          zoom: 5,
          center: [266812, 5960201]
        }),
        controls: ol.control.defaults({ "attribution": false }),
        layers: [
          new ol.layer.Tile({ title:'Waterolor', source: new ol.source.Stamen({ layer: 'watercolor' }) }),
          new ol.layer.Tile({ title:'Labels', source: new ol.source.Stamen({ layer: 'toner-labels' }) })
        ]
      });

    map.addControl(new ol.control.LayerSwitcher());

    // GeoJSON vector layer
    var vector = new ol.layer.Vector({
      name: '1914-18',
      source: new ol.source.Vector({
        url: '../data/fond_guerre.geojson',
        projection: 'EPSG:3857',
        format: new ol.format.GeoJSON(),
        attributions: [ '&copy; <a href="https://data.culture.gouv.fr/explore/dataset/fonds-de-la-guerre-14-18-extrait-de-la-base-memoire">data.culture.gouv.fr</a>' ]
      })
    });

    map.addLayer(vector);

    // Print control
    var printControl = new ol.control.Print();
    map.addControl(printControl);

    /* On print > save image file */
    printControl.on('printing', function(e) {
      $('body').css('opacity', .5);
    });
    printControl.on(['print', 'error'], function(e) {
      $('body').css('opacity', 1);
      // Print success
      if (e.image) {
        if (e.pdf) {
          // Export pdf using the print info
          var pdf = new jsPDF({
            orientation: e.print.orientation,
            unit: e.print.unit,
            format: e.print.format
          });
          pdf.addImage(e.image, 'JPEG', e.print.position[0], e.print.position[0], e.print.imageWidth, e.print.imageHeight);
          pdf.save();
        } else  {
          if ($('#file').prop('checked')) {
            e.canvas.toBlob(function(blob) {
              saveAs(blob, 'map.'+e.imageType.replace('image/',''));
            }, e.imageType);
          } else {
            $('#image img').attr('src', e.image);
          }
        }
      } else {
        console.warn('No canvas to export');
      }
    });

  </script>

</body>
</html>